// 适配像素
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter/material.dart';

/// 导航栏搜索 hooks写法

class SearchAppBar1 extends HookWidget {
  const SearchAppBar1({
    super.key,
    required this.hintLabel,
    this.onSubmitted,
    required this.onChanged,
    this.width,
    this.height,
  });
  final String hintLabel;
  final void Function(String)? onSubmitted;
  final void Function(String) onChanged;
  final double? width;
  final double? height;
  @override
  Widget build(BuildContext context) {
    // 焦点对象
    FocusNode focusNode = FocusNode();
    //用于清空输入框
    final controller = useState<TextEditingController>(TextEditingController());
    // TextEditingController controller = TextEditingController();
    // final inputVal = useState<String>('');
    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        focusNode.requestFocus();
      });
      return () {
        controller.value.dispose();
      };
    }, []);
    return Container(
      width: width ?? 300,
      height: height ?? 50,
      // 设置padding
      padding: const EdgeInsets.only(left: 20),
      // 设置子级位置
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: const Color(0xFFffffff),
      ),
      child: TextField(
        // inputFormatters: [
        //   FilteringTextInputFormatter.allow(RegExp(r'[0-9,\b]')),
        // ],
        controller: controller.value,
        // 自动获取焦点
        focusNode: focusNode,
        autofocus: false,
        decoration: InputDecoration(
            hintText: hintLabel,
            hintStyle: const TextStyle(color: Colors.grey, height: 0),
            // 取消掉文本框下面的边框
            border: InputBorder.none,
            icon: const Padding(
                padding: EdgeInsets.only(left: 0, top: 0),
                child: Icon(
                  Icons.search,
                  size: 24,
                )), //  关闭按钮，有值时才显示
            suffixIcon: controller.value.text.isNotEmpty
                ? IconButton(
                    icon: const Icon(Icons.close),
                    onPressed: () {
                      //   清空内容
                      // inputVal.value = '';
                      controller.value.clear();
                      onChanged('');
                    },
                  )
                : null),
        onChanged: onChanged,
        onSubmitted: onSubmitted,
        onTap: () {
          // 触摸收起键盘
          // FocusScope.of(context).requestFocus(FocusNode());
        },
      ),
    );
  }
}

/// 导航栏搜索
class SearchAppBar extends StatefulWidget {
  const SearchAppBar({
    Key? key,
    required this.hintLabel,
    this.onSubmitted,
    required this.onChanged,
    this.width,
    this.height,
  }) : super(key: key);
  final String hintLabel;
  // 回调函数
  final Function(String)? onSubmitted;
  final Function(String) onChanged;
  final double? width;
  final double? height;
  @override
  State<StatefulWidget> createState() => _SearchAppBarState();
}

class _SearchAppBarState extends State<SearchAppBar> {
  // 焦点对象
  final FocusNode _focusNode = FocusNode();
  // 文本的值
  String searchVal = '';
  //用于清空输入框
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    //  获取焦点
    // WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    //   _focusNode.requestFocus();
    // });
  }

  @override
  Widget build(BuildContext context) {
    // 获取屏幕尺寸
    MediaQueryData queryData = MediaQuery.of(context);
    return Container(
      // 宽度为屏幕的0.8
      width: widget.width ?? queryData.size.width * 0.8,
      // appBar默认高度是56，这里搜索框设置为40
      height: widget.height ?? 50,
      // 设置padding
      padding: const EdgeInsets.only(left: 20),
      // 设置子级位置
      alignment: Alignment.center,
      // 设置修饰
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: const Color(0xFFffffff)),
      child: TextField(
        controller: _controller,
        // 自动获取焦点
        focusNode: _focusNode,
        autofocus: false,
        decoration: InputDecoration(
            hintText: widget.hintLabel,
            hintStyle: const TextStyle(color: Colors.grey, height: 0),
            // 取消掉文本框下面的边框
            border: InputBorder.none,
            icon: const Padding(
                padding: EdgeInsets.only(left: 0, top: 0),
                child: Icon(
                  Icons.search,
                  size: 24,
                )),
            //  关闭按钮，有值时才显示
            suffixIcon: searchVal.isNotEmpty
                ? IconButton(
                    icon: const Icon(Icons.close),
                    onPressed: () {
                      //   清空内容
                      setState(() {
                        searchVal = '';
                        _controller.clear();
                        widget.onChanged('');
                      });
                    },
                  )
                : null),
        onChanged: (value) {
          setState(() {
            searchVal = value;
          });
          widget.onChanged(value);
        },
        onSubmitted: widget.onSubmitted,
      ),
    );
  }
}
